<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>联箱科技注册</title>
<link rel="icon" type="image/x-icon"	href="${basePath }static/img/HomePageImg/cat2.jpg" />
<!--引入bootstrap样式文件--->
<link rel="stylesheet" type="text/css"	href="${basePath }static/bootstrap-3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="${basePath }static/css/HomePageCss/top.css" />
<link rel="stylesheet"	href="${basePath }static/css/HomePageCss/cool.css" />
<link rel="stylesheet" href="${basePath }static/css/cwx/registe.css" />
<link rel="stylesheet"	href="${basePath }static/css/HomePageCss/bottom.css" />
<link rel="stylesheet"	href="${basePath }static/css/HomePageCss/login.css" />
<link rel="stylesheet" href="${basePath }static/css/sj/product.css" />
<!--引入jquery-->
<script type="text/javascript"	src="${basePath }static/js/HomePageJs/iquery-1.12.4/jquery-1.12.4.min.js"></script>
<!--引入layer-->
<script type="text/javascript"	src="${basePath }static/js/HomePageJs/layer-v3.1.1/layer/layer.js"></script>
<!--引入bootstrap脚本--->
<script type="text/javascript"	src="${basePath }static/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript"	src="${basePath }static/js/HomePageJs/jquery.pin.js"></script>

</head>

<body id="rbody">

<!-- 插入前两栏 -->
<%@ include file="../menu.jsp" %>
	<!--注册表单-->
	<div>
		<div class="registe ">

			<div class="ioc_text">
				<div class="联想会员注册"></div>
			</div>

			<div>
				<form id="form0" action="UserRegister" method="post" enctype="multipart/form-data">
					<!-- 约定：表达的name属性值和数据库的字段名保持一致【大小写敏感】 -->
					<div class="registe-content">

						<div class="bootint">
							<span class="input-span-text ">用户昵称</span> <input type="text"
								class=" form-control3 " id="username" name="username"
								placeholder="请输入用户名（4-6位非空字符）">
							<!--  <span class="right-span-text ">4-6位非空字符</span>	 -->
						</div>

						<div class="bootint">
							<span class="input-span-text ">密码</span> <input type="password"
								class="form-control3 " id="userpsw" name="userpsw"
								placeholder="请输入密码（8-12位字母或数字）">
							<!-- <span class="right-span-text ">8-12位字母或数字</span> -->
						</div>

						<div class="bootint">
							<span class="input-span-text ">确认密码</span> <input type="password"
								class=" form-control3" id="userpsw2" name="userpsw2"
								placeholder="请再次输入密码（与第一次输入的密码一致）">
						</div>

						<div class="bootint">
							<span class="input-span-text ">性别</span> <input type="radio"
								id="male" name="usersex" value="男"
								style="margin: 12px 0px 12px 60px" />男 <input type="radio"
								id="female" name="usersex" value="女"
								style="margin: 12px 0px 12px 60px" />女
						</div>

						<div class="bootint">
							<span class="input-span-text ">居住地</span> <input type="text"
								class="form-control3" id="userlocation" name="usercity"
								placeholder="请输入居住地">
						</div>
						
						<div class="bootint">
						<!-- 因为springmvc框架中，文件流对象，需要单独进行映射，不能直接映射给实体类；
							所有，文件表单控件name属性按一下规范命名：前缀_实体类属性名；
							例如：file_adminimg（注意file_在文件上传时是固定的） 
							目的：防止文件流对象内容直接映射给实体类的属性-->
						<span class="input-span-text ">头像</span>	
						<input type="file" class="form-control3" id="adminimg"name="file_userimg" > 
					    </div>

						<div class="bootint">
							<span class="input-span-text ">手机号</span> <input type="text"
								class="form-control3" id="usertel" name="usertel"
								placeholder="请输入手机号">
						</div>

						<div class="bootint">
							<input type="text" class="form-control4" id="yzm" name="authmsg"
								placeholder="请输入验证码">
							<button type="button" class="btn-default btn2" id="hqyzm"
								onclick="doAjaxSMS()">获取验证码</button>
							<input type="hidden" id="yzm2" name="yzm2" />
						</div>

						<div style="padding-top: 30px;">
							<button type="submit" class="btn btn-danger btn-lg btn-block "
								id="rebtn" onclick="return checkMe()">立即注册</button>
						</div>

					</div>
				</form>
			</div>
		</div>
	</div>

<!-- 插入尾部 -->
<%@ include file="../end.jsp" %>
</body>

<script type="text/javascript">
	// 验证form表单是否合法
	function checkMe() {
		// 错误提示信息
		var strMsg = "";
		// 用户昵称验证
		var regName = /^.\S{3,5}$/;
		var username = document.getElementById("username").value;
		if (username == null || username == ""
				|| regName.test(username) === false) {
			// 增加提示信息
			strMsg += "请输入用户名!<br>";
		}
		// 密码验证
		//var regPsw = /^.[A-z0-9]{7,11}$/;
		var userpsw = document.getElementById("userpsw").value;
		if (userpsw == null || userpsw == "" || regPsw.test(userpsw) === false) {
			// 增加提示信息
			strMsg += "请输入正确格式的密码!<br>";
		}
		var userpsw2 = document.getElementById("userpsw2").value;
		if (userpsw != userpsw2) {
			// 增加提示信息
			strMsg += "两次密码不一致！";
		}
		// 性别单选框验证
		// 获取所有的单选框对象
		// 获取的是存储多个单选对象的数组
		var radioSexs = document.getElementsByName("usersex");
		var isCheckedSex = false; // 默认没有选择
		// 循环遍历来确定是否进行了选择【循环肯定或循环否定法】
		if (radioSexs != null && radioSexs.length > 0) {
			for (var i = 0; i < radioSexs.length; i++) {
				// 有选择的选项，则修改标识变量
				if (radioSexs[i].checked) {
					isCheckedSex = true;
					// 终止
					break;
				}
			}
		}
		// 判定是否选择了性别
		if (isCheckedSex == false) {
			// 没有选择性别，提示
			// 增加提示信息
			strMsg += "请选择性别!<br>";
		}
		// 居住地验证
		var userlocation = document.getElementById("userlocation").value;
		if (userlocation == null || userlocation == "") {
			// 增加提示信息
			strMsg += "请输入居住地 !<br>";
		}
		// 手机号验证
		var regModile = /^1\d{10}$/;
		var usertel = document.getElementById("usertel").value;
		if (usertel == null || usertel == ""
				|| regModile.test(usertel) === false) {
			// 增加提示信息
			strMsg += "请输入正确的手机号!<br>";
		}
		//验证码验证
		var yzm = document.getElementById("yzm").value;
		var yzm2 = document.getElementById("yzm2").value;
		if (yzm == null || yzm == "" || yzm != yzm2) {
			// 增加提示信息
			strMsg += "请输入正确的验证码!";
		}
		// 判定整个表单是否可以进行提交
		if (strMsg == "") {
			// 验证通过
			
			return true;
		} else {
			// 验证不通过
			layer.open({
				title : '提示',
				content : strMsg
			});
			return false;
		}
	}
	// 手动提交form表单
	function doSubmit() {
		document.getElementById("form0").submit();
	}
</script>
<script type="text/javascript">
		//使用jquery进行  注册操作
// 			function doAjaxSubmit() {
// 				// 使用jquery进行ajax请求处理
// 				$.ajax({
// 					type : "POST", // 请求类型
// 					url : "UserRegister", // 请求的url
// 					data : $("#form0").serialize(), // 发送的数据 使用serialize方法替代手动拼写数据串
// 		// 			dataType : "json", // 响应发挥的数据类型  
// 					success : function(data, textStatus, jqXHR) {
// 					if(data > 0){
// 						alert("注册成功!");
// 						//跳转
// 						//window.location.href='${basePath }userMessage/account.jsp';
// 						
// 					}
// 					},
// 					error : function(data) {
// 						alert("注册失败" + data);
// 					}
// 				});
// 				}
	//短信验证函数
	function doAjaxSMS() {
		//短信验证
		var regModile = /^1\d{10}$/;
		var usertel = document.getElementById("usertel").value;
		if (usertel == null || usertel == ""
				|| regModile.test(usertel) === false) {
			// 手机验证失败
			alert("请输入正确手机号!");
		} else {
			//手机验证通过
			$.ajax({
				type : "POST", // 请求类型
				url : "Sms", // 请求的url
				data : "usertel=" + $("#usertel").val(),
				// 			dataType : "json",
				success : function(data, textStatus, jqXHR) { // 执行成功之后的回调函数
					console.info(data);
					// 回调函数的dom操作
					alert("验证码为" + data);//便于测试，正式上线删除
					document.getElementById("yzm2").value = data;
				},
				error : function(data) {
					alert("请求失败" + data);
				}
			});
		}
	}
</script>
<script type="text/javascript"
	src="static/js/HomePageJs/layer-v3.1.1/layer/layer.js"></script>
<script type="text/javascript ">
		function ShowLogin() {
			layer.open({
				type: 2,
    			title: '登录',
    			maxmin: true,
    			area: ['800px', '600px'],
    			content: '${basePath }jump?pg=userlogin_1',
			});
		}
</script>
<script type="text/javascript ">
	$(document).ready(function(){
		var o=document.getElementById("我要删你兄弟");//获取父节点
		var a=document.getElementById("登录图标");//获取需要删除的子节
		//获取用户的登录账号（手机号）
		var $isLogin=<%=session.getAttribute("userTel")%>
		//判断是否登录
		if($isLogin == null ||  typeof($isLogin) == "undefined"|| $isLogin == ""){
			
		}else{
			
			o.removeChild(a); //从父节点o上面移除子节点a;
			$("#我要删你兄弟").html("<span ><%=session.getAttribute("userName")%></span>");
			document.getElementById("userstatus").style.display="";
		}
	});


</script>
</html>